<template>
  <div>

    <el-row :span="24">
       <el-col :span="14">
        <admin-crash style="margin-left: 10px;"></admin-crash>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="add">添加考生</el-button>
      </el-col>
      <el-col :span="2" :offset="1">
        <el-button type="primary" @click="fileUploadAdd">
          <i class="el-icon-upload"></i> 文件添加考生</el-button
        >
      </el-col>
    </el-row>
    <el-table :data="studentList" stripe style="width: 100%">
      <el-table-column prop="sid" label="学号/手机" >
      </el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column prop="language" label="语言" >
      </el-table-column>
      <el-table-column prop="grade" label="班级"> </el-table-column>

      <!-- <el-table-column prop="achievement" label="成绩"> </el-table-column> -->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-edit"
            @click="edit(scope.row)"
            circle
          ></el-button>
          <el-popconfirm
            title="这是一段内容确定删除吗？"
            @confirm="delStudent(scope.row)"
            @cancel="$message.info('已取消')"
          >
            <el-button
              type="danger"
              slot="reference"
              icon="el-icon-delete"
              circle
            ></el-button>
          </el-popconfirm>
          <!-- <el-button type="danger" icon="el-icon-delete" circle ></el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      :title="dialogVisible.title"
      :visible.sync="dialogVisible.flagVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="student" label-width="80px" :rules="rules">
        <el-form-item label="学号" prop="sid">
          <el-input
            v-model="student.sid"
            :disabled="!dialogVisible.flag"
          ></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="student.name"></el-input>
        </el-form-item>
        <el-form-item label="班级" prop="grade">
          <el-input v-model="student.grade"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible.flagVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitEdit">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="文件上传" :visible.sync="filedialogVisible" width="30%">
      <el-upload
        class="upload-demo"
        drag
        :action="$httpUrl + '/management/batchInputUser'"
        multiple
        name="file"
        :headers="headers"
        :on-success="fileUploadSuccess"
        :on-error="fileUploadError"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">
          只能上传xlsx/xlx文件，且不超过100kb
        </div>
      </el-upload>
    </el-dialog>
  </div>
</template>

<script>
import AdminCrash from './AdminCrash.vue';
export default {
  components: { AdminCrash },
  data() {
    return {
      student: {},
      studentList: [],
      dialogVisible: {
        title: "",
        flag: false, // 是否为新增
        flagVisible: false,
      },
      filedialogVisible: false,
      headers: {
        Authorization: this.$cookies.get("token"),
      },
      rules: {
        sid: [
          { required: true, message: "请输入学号", trigger: "blur" },
          {
            min: 8,
            max: 16,
            message: "长度在 8 到 16个字符 ",
            trigger: "blur",
          },
        ],
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" },
        ],
        grade: [
          { required: true, message: "请输入班级", trigger: "blur" },
          {
            min: 4,
            max: 20,
            message: "长度在 4 到 20 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.getStudentList();
  },
  methods: {
    async getStudentList() {
      const res = await this.$http.get("/management/userList");
      console.log(res);
      this.studentList = res.data.data;
    },
    fileUploadAdd() {
      this.filedialogVisible = true;
    },
    add() {
      this.student = {};
      this.dialogVisible.title = "新增";
      this.dialogVisible.flagVisible = true;
      this.dialogVisible.flag = true;
    },
    edit(item) {
      console.log(item);
      this.student = { ...item };
      this.dialogVisible.title = "编辑";
      this.dialogVisible.flagVisible = true;
    },
    fileUploadSuccess(response, file, fileList) {
      console.log(response);
      if (response.message != "ok") {
        return this.$message.error(
          "上传失败，请检查表格数据是否有目前已经存在的数据 -- 错误信息:" +
            response.data
        );
      }
      this.$message.success("上传成功");
      this.filedialogVisible = false;
      this.getStudentList();
    },
    fileUploadError(err, file, fileList) {
      console.log(err);
      // const res = JSON.parse(JSON.stringify(err))
      this.$message.error(err);
    },
    async delStudent(item) {
      // /management/delUser/20200407430366
      const res = await this.$http.delete(`/management/delUser/${item.sid}`);
      console.log(res);
      if (res.data.message != "ok") {
        return this.$message.error(res.data.data);
      }
      this.$message.success("删除成功");
      this.filedialogVisible = false;
      this.getStudentList();
    },
    handleClose() {
      this.dialogVisible.flagVisible = false;
      this.resetForm("form")
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    async submitEdit() {
      this.$refs["form"].validate(async (valid) => {
        if (valid) {
          if (this.dialogVisible.flag) {
            const res = await this.$http.post(
              "/management/inputUser",
              this.student
            );
            if (res.data.message != "ok") {
              return this.$message.error(res.data.data);
            }
            this.$message.success("添加成功");
            this.getStudentList();
            this.dialogVisible.flagVisible = false;
            this.dialogVisible.flag = false;
            return;
          }

          const res = await this.$http.put(
            "/management/updateUser",
            this.student
          );
          console.log(res);
          if (res.data.message != "ok") {
            return this.$message.error("修改失败");
          }
          this.$message.success("修改成功");
          this.getStudentList();
          this.handleClose();
          // this.dialogVisible.flagVisible = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style>
</style>